<template>
  <div>
    <!-- 流程名称
    当前节点2/5
    提交人
    审核人
    提交时间
    资源名称
    流程状态
    操作： 流程明细  结束流程（退回，通过）  -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="流程名称" width="180">
      </el-table-column>
      <el-table-column prop="address" label="资源名称" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.initData.title || row.initData.name || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="currentStep" label="当前节点" width="180">
      </el-table-column>
      <el-table-column prop="address" label="审核状态" width="120">
        <template slot-scope="{ row }">
          <span v-if="row.auditStatus == 0" class="color-info">暂存</span>
          <span v-if="row.auditStatus == 1" class="color-info">待审核</span>
          <span v-if="row.auditStatus == 2" class="color-success">已通过</span>
          <span v-if="row.auditStatus == 3" class="color-danger">未通过</span>
          <span v-if="row.auditStatus == 4" class="color-danger">驳回</span>
          <span v-if="row.auditStatus == 5" class="color-primary">取回</span>
        </template>
      </el-table-column>
      <el-table-column prop="nextStep" label="流程状态"> </el-table-column>
      <el-table-column prop="createBy" label="提交人" width="120">
      </el-table-column>
      <el-table-column prop="createTime" label="提交时间" width="180">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="{ row }">
          <el-button-group>
            <el-button type="success" size="mini" @click="handleLookFlow(row)"
              >流程明细</el-button
            >
            <el-button type="success" size="mini">结束流程</el-button>
          </el-button-group>
        </template>
      </el-table-column>
      <div slot="empty" class="emptyBg">
        <el-empty :image-size="200"></el-empty>
      </div>
    </el-table>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        // classifyId: '',
      },
      tableData: [],
      pageObj: {},
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      let res = await this.$store.dispatch(
        'queryInstanceListFlowApi',
        this.listQuery,
      )
      this.pageObj = res
      this.tableData = res.data
      this.tableData.forEach((item) => {
        this.$set(item, 'initData', JSON.parse(item.businessData))
      })
    },
    //查看审核流程
    handleLookFlow(row) {
      this.$bus.$emit('showDialogFlowInfo', row)
    },
  },
}
</script>
<style scoped lang="scss">
</style>